<template>
  <div ref="target" class="goods-box">
    <HomePanel v-for="item in list" :title="item.name" :key="item.id">
      <template #right>
        <div class="slot-right">
          <div class="goods-title">
            <RouterLink class="goods-a" v-for="i in item.children" to="/" :key="i.id">{{ i.name }}</RouterLink>
          </div>
          <XtxMore @click="lookData(item.id)" style="line-height: 22px" />
        </div>
      </template>
      <!-- 主体内容 -->
      <div class="sub">
        <RouterLink :to="`/category/${item.id}`" class="img-left">
          <img :src="item.picture" alt="" />
        </RouterLink>
        <ul class="goods-list">
          <li v-for="goods in item.goods" :key="goods.id">
            <div class="goods-item">
              <RouterLink :to="`/goods/${goods.id}`" class="img-router">
                <img :src="goods.picture" alt="" />
              </RouterLink>
              <p class="goods-name">{{ goods.name }}</p>
              <p class="ellipsis desc">{{ goods.desc }}</p>
              <span class="price">￥{{ goods.price }}</span>
              <div class="more">
                <RouterLink class="see-more" :to="`/category/${item.id}`">
                  <span class="top-see">找相似</span>
                  <span class="bott-see">查看更多宝贝 ></span>
                </RouterLink>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </HomePanel>
  </div>
</template>
<script>
import HomePanel from './home-panel.vue'
import { getGoodsList } from '@/api/home.js'
import { useLazyData } from '@/utils/hoods.js'
import { useRouter } from 'vue-router'
export default {
  name: 'HomeGoods',
  components: {
    HomePanel
  },
  setup() {
    // 商品区块数据（数据懒加载）
    const { target, list } = useLazyData(getGoodsList)
    // 点击查看更多
    const router = useRouter()
    const lookData = id => {
      router.push(`/category/${id}`)
    }
    return {
      target,
      list,
      lookData
    }
  }
}
</script>

<style lang="less" scoped>
.slot-right {
  display: flex;
  .goods-title {
    margin-right: 80px;
    font-size: 16px;
    .goods-a {
      padding: 2px 12px 5px 12px;
      &:hover {
        background: #27ba9b;
        border-radius: 4px;
        color: #fff;
      }
    }
  }
}
.sub {
  display: flex;
  .img-left {
    width: 240px;
    height: 610px;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover; //对图片进行剪切保留原始比例
    }
  }
  .goods-list {
    width: 990px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 240px;
      height: 300px;
      margin-bottom: 10px;
      &:hover {
        border: 1px solid #27ba9b;
        .more {
          transform: translateY(0);
          transition: all 0.5s;
        }
      }
      .goods-item {
        width: 100%;
        height: 100%;
        padding: 10px 30px;
        position: relative;
        overflow: hidden;
        .img-router {
          display: block;
          width: 160px;
          height: 160px;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .goods-name {
          height: 44px;
          font-size: 16px;
          margin-top: 5px;
        }
        .desc {
          margin-top: 6px;
          font-size: 16px;
          color: #cf4444;
        }
        .price {
          font-size: 20px;
          color: #cf4444;
          margin-top: 20px;
        }
      }
      .more {
        width: 100%;
        height: 86px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #27ba9b;
        transition: all 0.5s;
        transform: translateY(86px);
        .see-more {
          display: flex;
          flex-direction: column;
          align-items: center;
          .top-see {
            display: block;
            width: 120px;
            text-align: center;
            font-size: 18px;
            padding: 10px 0;
            border-bottom: 1px solid #fff;
            color: #fff;
          }
          .bott-see {
            padding-top: 5px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
